<template>
    <view class="mapWrap">
        <map class="metroMap" :longitude="longitude" :latitude="latitude" :polyline="polylineArr" :markers="stationArr" scale="11" @callouttap="bindMarker"></map>
        <view class="tips text-center font13 bg-theme-opacity" v-if="productsCount">可视范围内：共{{ productsCount }}个新房楼盘</view>
        <view class="topSelectWrap flex">
            <view class="lineBtn bg-fff flex" @click="showModal=true" v-if="subwayList.length > 0">
                <block v-if="subwayList[currentLine].nameSplit.length > 1">
                    <view class="lineWrap col-fff flex" :style="{backgroundColor: subwayList[currentLine].color}">
                        <view class="num">{{ subwayList[currentLine].nameSplit[0] }}</view>
                    </view>
                    <view class="left-5 right-5">号线{{ subwayList[currentLine].nameSplit[1] }}</view>
                </block>
                <block v-else>
                    <view class="right-5">{{ subwayList[currentLine].nameSplit[0] }}</view>
                </block>
                <image class="arrowDown" src="https://image.srea.org.cn/xcx/icon/icon-arrow-down-333333.png"></image>
            </view>
            <view class="col-fff font10 flex">
                <block v-for="(tag, tagI) in tags" :key="tagI">
                    <view class="tag left-10" :style="{backgroundColor: tag.color}">{{ tag.label }}</view>
                </block>
            </view>
        </view>
        <view class="filterModal" v-show="showModal" @click.stop="showModal = false">
            <view class="contentWrap bg-fff">
                <view class="filterWrap flex">
                    <view class="column1 bg-grey text-center">
                        <view class="btnItem active">地铁</view>
                    </view>
                    <view class="column2">
                        <block v-for="(lineItem, lineI) in subwayList" :key="lineI">
                            <view class="btnItem" :class="chengeLine === lineI ? 'active':''" @click.stop="changeLine(lineI)">{{ lineItem.label }}</view>
                        </block>
                    </view>
                </view>
                <view class="btnGroup flex text-center">
                    <view class="btn closeBtn" @click.stop="cancelModal">取消</view>
                    <view class="btn confirmBtn" @click.stop="confirmModal">确认</view>
                </view>
            </view>
        </view>
        <share-btn></share-btn>
    </view>
</template>

<script>
	import { mapState, mapActions } from 'pinia';
	import { useConfigStore, useIndexStore, useUserInfoStore } from '@/store/index';
    import { getPolylineAndStationOfLine, getLineNearbyMarkers } from '@/common/utils/map-tools';
	import { getSubway } from "@/common/api";
	export default {
		data() {
			return {
                tags: [
                    { color: "#5FAADD", label: '待销售' },
                    { color: "#0F49BC", label: '认购中' },
                    { color: "#D81C03", label: '在售中' }
                ],
                chengeLine: 0,
				currentLine: 0,
                subwayList: [],
                polylineArr: [{
					points: [],
					color: '#FAA000',
					width: 3
				}],
				stationArr: [],
                longitude: null,
                latitude: null,
                dangerCol: '#D81C03',
                primaryCol: '#0F49BC',
                showModal: false
			}
		},
		
        computed: {
			...mapState(useIndexStore, ['cityMap', 'nowCityCode']),
			...mapState(useUserInfoStore, ['userInfo']),
			...mapState(useConfigStore, ['puid']),

            productsCount: function () {
                if(this.subwayList.length === 0) return 0;
                return this.subwayList[this.currentLine].products.length
            }
        },

        onShareAppMessage(res) {
            return {
                title: `点击进入地铁找房`,
				path: `/pages/products/metro/map?puid=${this.userInfo.id}`,
            	//#ifdef MP-TOUTIAO
            	templateId: '3e9tvurff9vob6ot7u',
            	//#endif
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `点击进入地铁找房`,
                query: `puid=${this.userInfo.id}`
            }
        },
        //#endif

        onLoad(options){
            const that = this;
            let { puid='', lineCurrent=0 } = options;
            if(puid) {
                this.setPuid(puid)
            }

            this.currentLine = lineCurrent ? lineCurrent : 0;
            this.chengeLine = lineCurrent && lineCurrent !== 'undefined' ? lineCurrent : 0;

            uni.$check_and_login(function() {
                that.init()
            })
		},

		methods:{
            ...mapActions(useConfigStore, ['setPuid']),

            //初始化获取所有线路
			async init() {
				let metroList = [];
				if(this.cityMap[this.nowCityCode]){
                    metroList = this.cityMap[this.nowCityCode].city[0].subway;
				}else{
					let metroRes = await getSubway(this.nowCityCode);
					metroList = metroRes.detail;
				}
				this.subwayList = metroList.map(item => ({
					label: item.label,
					value: item.value,
                    nameSplit: item.label.split('号线'),
					polyline: [],
					station: [],
                    products: [],
                    color: item.color?item.color:''
				}))
				await this.getStationOfLine();
			},

            //根据线路获取站点
			async getStationOfLine(){
				let { polylineArr, stationArr, color } = await getPolylineAndStationOfLine({
					cityCode: this.nowCityCode,
					subways: this.subwayList,
					currentLine: this.currentLine
				})

                if(polylineArr.length === 0 || stationArr.length === 0) {
                    uni.$common.msg('暂无数据');
                    return;
                };

				if(polylineArr.length > 0) {
					this.polylineArr[0].points = this.subwayList[this.currentLine].polyline = polylineArr;
					this.stationArr = stationArr;
				}

                if(stationArr.length > 0) {
                    const middleI = Math.floor(stationArr.length / 2);
                    this.longitude = stationArr[middleI].longitude;
                    this.latitude = stationArr[middleI].latitude;
                };

                if(color) {
                    this.subwayList[this.currentLine].color = color;
                    this.polylineArr[0].color = color;
                }

                //请求附近所有地铁房坐标
                const prodMarkers = await getLineNearbyMarkers({
                    cityCode: this.nowCityCode,
                    lineObj: this.subwayList[this.currentLine]
                })
                if(prodMarkers.length > 0) {
                    this.subwayList[this.currentLine].products = prodMarkers;
                    this.stationArr.push(...prodMarkers)
                }
			},

            //切换线路
            changeLine(index) {
                this.chengeLine = index;
            },

            //取消切换线路
            cancelModal() {
                this.chengeLine = this.currentLine;
                this.showModal = false;
            },

            //确认切换线路
            async confirmModal() {
                this.currentLine = this.chengeLine;

                //清除地图
                this.polylineArr = [
                    {
                        points: [],
                        color: '#FAA000',
                        width: 3
                    }
                ];
                this.stationArr = [];

                await this.getStationOfLine();
                this.showModal = false;
            },

            //点击楼盘marker
            bindMarker(e) {
                if(!e.detail.markerId) return;
                uni.navigateTo({
                    url: `/pages/product/detail/index?productId=${e.detail.markerId}&puid=${this.puid}`
                })
            }
        }
	}
</script>

<style scoped lang="scss">
.mapWrap{
    height: 100vh;
    overflow: hidden;
    position: relative;
    .metroMap{
        width: 100%;
        height: calc(100vh + 40rpx);
    }
    .tips{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10rpx 0;
    }
    .topSelectWrap{
        position: fixed;
        top: 75rpx;
        left: 28rpx;
        width: calc(100% - 56rpx);
        justify-content: space-between;
        .lineBtn{
            border: 2rpx solid rgba(0,0,0,0.6);
            border-radius: 10rpx;
            padding: 10rpx 20rpx;
            .lineWrap{
                border-radius: 50%;
                width: 40rpx;
                height: 40rpx;
            }
            .arrowDown{
                width: 30rpx;
                height: 30rpx;
            }
        }
        .tag{
            border-radius: 10rpx;
            padding: 4rpx 16rpx 8rpx 16rpx;
        }
    }
    .filterModal{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 101;
        background-color: rgba(0, 0, 0, .6);
        .contentWrap{
            margin: 50rpx 28rpx;
            border-radius: 20rpx;
            .filterWrap{
                height: 60vh;
                justify-content: flex-start;
                .column1,.column2{
                    height: 100%;
                    overflow-y: scroll;
                }
                .column1{
                    width: 20%;
                }
                .column2{
                    width: 40%;
                    padding: 0 30rpx;
                }
                .btnItem{
                    height: 70rpx;
                    line-height: 70rpx;
                }
                .active{
                    background-color: #ffffff;
                    color: #FAA000;
                }
            }
            .btnGroup{
                padding: 20rpx 28rpx;
                border-top: 2rpx solid rgba(0,0,0,.06);
                justify-content: space-between;
                .btn{
                    height: 60rpx;
                    line-height: 60rpx;
                    border-radius: 30rpx;
                }
                .closeBtn{
                    width: 100rpx;
                    border: 2rpx solid rgba(0, 0, 0, .6);
                }
                .confirmBtn{
                    width: calc(100% - 130rpx);
                    color: #ffffff;
                    background-color: $theme-color;
                    border: 2rpx solid $theme-color;
                }
            }
        }
    }
}
</style>